<template>
	<!-- 活动基本信息 -->
	<div class="content" v-if="is_page==0">
		<div class="content-top">
			活动管理_添加活动
		</div>
        <div class="activity">
            <el-row>
				<el-col :span="8"><label>活动名称：</label><el-input v-model="info.name" type="text" /></el-col>
				<el-col :span="8"><label>活动编号：</label><el-input v-model="info.code" type="text" /></el-col>
				<el-col :span="8">
                    <label>活动类型：</label>
                    <el-select v-model="info.type">
                        <el-option 
                        v-for="item in stateList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"></el-option>
                    </el-select>
               </el-col>
			</el-row>
            <el-row>
				<el-col :span="8">
                    <label>活动状态：</label>
                    <el-select v-model="info.status">
                        <el-option 
                        v-for="item in activityType"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"></el-option>
                    </el-select>
                </el-col>
				<el-col :span="8">
                    <label>活动是否显示：</label>
                        <el-select v-model="info.isShown">
                           <el-option 
                            v-for="item in activityShow"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"></el-option>
                        </el-select>
                    </el-col>
			</el-row>
            <el-row>
                <el-col :span="24">
                    <label>活动宣传图：</label>
                    <el-upload
                    class="upload-demo"
                    :show-file-list='false'
                    drag
                    :action="imageuploadurl"
                    :on-success="uploadFile"
                    :before-upload="beforeAvatarUpload"
                    multiple>
                    <div v-if="info.imgUrl==''">
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </div>
                    <el-image fit="contain" v-else :src="info.imgUrl" alt=""></el-image>
                </el-upload>
                </el-col>
            </el-row>
            <el-row>
				<el-col :span="24">
                    <label>规则描述：</label>
                    <MavonEditor :html="info.description" :disabled="false" @editorHtml="editorHtml"></MavonEditor>
                </el-col>
			</el-row>
            <el-row>
                <el-col :span="24" v-if="info.type == 2">
                    <label>条件设置：</label>
                    <el-button @click="conditionClick(1)">换电订单满减</el-button>
                    <div v-if="conditionVal != ''">
                       <div class="condition-text" v-for="(item,idx) in conditionList" :key="idx" >{{'满 '+ item.amount + '元 '+' 减 ' + item.reduceAmount + ' 元'}}</div>
                    </div>
                    
                </el-col>
                <el-col :span="24" v-if="info.type == 3">
                    <label>条件设置：</label>
                    <el-button @click="conditionClick(2)">充值送金额</el-button>
                    <div v-if="conditionVal != ''">
                        <div class="condition-text" v-for="(item,idx) in conditionList" :key="idx" >{{'充值满 '+ item.amount + '元 '+' 赠 ' + item.reduceAmount + ' 元'}}</div>
                    </div>
                    
                </el-col>
                <el-col :span="12" v-if="info.type == 1">
                    <label>对应问卷：</label>
                    <!-- <el-button @click="onQuestionnaire(2)">添加问卷</el-button> -->
                    <el-button @click="onQuestionnaire(3)">查看问卷</el-button>
                </el-col>
                    <el-col :span="12" v-if="info.type == 0 || info.type == 1">
                        <label>赠送优惠券：</label>
                        <div v-if="conditionVal != ''" class="coupon_list">
                            <div class="coupon_bg" v-for="(item,idx) in conditionVal.list" :key="idx">
                                <img src="@/assets/img/coupon.png" alt="">
                                <div class="condition_text">
                                    <div><strong>{{item.minPoint}}</strong>元</div>
                                    <div>订单满{{item.amount}}元</div>
                                    <div>每人限领{{item.num}}张</div>
                                </div>
                            </div>
                        </div>
                        <el-button v-else @click="addCoupon">添加优惠券</el-button>
                    </el-col>
            </el-row>
        </div>
        <div class="car-title center-button">
			<center>
				<el-button type="primary" @click='cancel'>取消</el-button>
                <el-button type="primary" @click='save'>保存</el-button>
			</center>
		</div>
        <template v-if="is_condition">
			<div class="all-screen"></div>
			<div class='add-box'>
				<ActivityCondition @condition="condition" :conditionType='conditionType'></ActivityCondition>
			</div>
		</template>
       
	</div>
    <ActivityCoupon v-else-if="is_page == 1" @coupon="coupon"></ActivityCoupon>
    <AddQuestionnaire v-else-if="is_page == 2" @questionnaire="questionnaire"></AddQuestionnaire>
    <QuestionnairePreview v-else @questionnaire="questionnaire" :questionId="questionId"></QuestionnairePreview>
</template>
<script>
import MavonEditor from '@/components/mavon-editor.vue'
import ActivityCondition from '@/components/activity/ActivityCondition.vue'
import ActivityCoupon from '@/components/activity/ActivityCoupon.vue'
import AddQuestionnaire from '@/components/activity/AddQuestionnaire.vue'
import QuestionnairePreview from '@/components/activity/QuestionnairePreview.vue'
	export default {
        props:['detail'],
        components:{
            MavonEditor: MavonEditor,
            ActivityCoupon: ActivityCoupon,
            ActivityCondition: ActivityCondition,
            AddQuestionnaire: AddQuestionnaire,
            QuestionnairePreview: QuestionnairePreview
        },
		data() {
			return {
                dict: '',
                stateList:[{id:0,name:'优惠券'},{id:1,name:'问卷'},{id:2,name:'满减'},{id:3,name:'充值'},{id:4,name:'其他'}],
                activityShow:[{id:0,name:'是'},{id:1,name:'否'}],
                activityType:[{id:0,name:'上线中'},{id:1,name:'过期'},{id:2,name:'预约中'}],
                info:{
                    status:0,
                    type:1,
                    isShown:0,
                    name:'',
                    code:'',
                    description:'',
                    imgUrl:'',
                },
                imageuploadurl:this.$global.serverIp + 'admin/upload/uploadProfile',
                importHeaders:{},
                is_condition:false,
                is_page:0,
                conditionType:0,
                conditionVal:'',
                questionId:'',
                conditionList:[]
			}
		},
		created() {
            
        },
        mounted(){
            this.importHeaders = {Authorization: 'Bearer ' + localStorage.getItem('token')};
            // this.get_detail()
            this.info = this.detail
            console.log(this.info)
        },
		methods: {
            /* 问卷 */
            onQuestionnaire(type){
                this.is_page = type
            },
            /* 条件设置 */
            conditionClick(type){
                this.conditionType = type
                this.is_condition = true
            },
            addCoupon(val){
                this.is_page = 1
            },
            coupon(val){
                if(val != 1){
                   this.conditionVal = val
                }
                this.is_page = 0
            },
            questionnaire(val){
                 if(val != 1){
                   this.questionId = val
                }
                this.is_page = 0
            },
            /* 添加优惠券 */
            condition(val){
                if(val != 1){
                    this.conditionVal = {
                        id:[]
                    }
                    this.conditionList.push(val)
                    for(let item of this.conditionList){
                       this.conditionVal.id.push(item.id)
                    }
                }
                this.is_condition = false
            },
             uploadFile(res, file){
                 this.info.imgUrl = this.$global.serverIp + 'admin/' +res.data
             },
			editorHtml(val){
                  this.info.description = val
            },
			get_dict() {
				var self = this;
				this.$axios.get(this.$global.serverIp + 'admin/dict/findDict?keyword=battery')
				  .then(function (res) {
					  if(res != '')
						self.dict = res.data;
				  })
            },
            cancel(){
                this.$emit('isEdit')
            },
            beforeAvatarUpload(file) {
			  const isJPG = file.type === 'image/jpeg';
			  const isLt2M = file.size / 1024 / 1024 < 2;
			    if (!isJPG) {
			      this.$message.error('上传头像图片只能是 JPG 格式!');
            }
			    if (!isLt2M) {
			      this.$message.error('上传头像图片大小不能超过 2MB!');
			    }
			    return isJPG && isLt2M;
        },
        
        save(){
            if(this.info.name == ''){
                this.$popup.open('活动名称不能为空')
                return;
            }
            if(this.info.code == ''){
                this.$popup.open('活动编号不能为空')
                return;
            }
            if(this.info.picUrl == ''){
                this.$popup.open('宣传图不能为空')
                return;
            }
            if(this.info.description == ''){
                this.$popup.open('规则描述不能为空')
                return;
            }
            var self = this;
            var activityRulesIds = []
            if(self.info.type == 1){
                activityRulesIds = [self.questionId,self.conditionVal.id]
            }else if(self.info.type == 2|| self.info.type == 3){
                activityRulesIds = self.conditionVal.id
            }else {
                 activityRulesIds = [self.conditionVal.id]
            }
			this.$axios.post(this.$global.serverIp + 'frontend/activity/saveOrUpdate',{
               "name":self.info.name,
               "code":self.info.code,
               "status":self.info.status,
               "type":self.info.type,
               "isShown":self.info.isShow,
               "activityRulesIds":activityRulesIds,
               "picUrl":self.info.imgUrl,
               "description":self.info.markdownHtml,
               "id":self.id
            }).then(function (res) {
					if(res != ''){
                        self.$popup.open('添加成功')
                        self.$emit('addActivity',2)
                    }
			})
        },
      
			
      },
      computed: {
            getType() {
                return this.info.type;
            }
      },
      watch:{
          getType(n,o){
            if(n){
                this.conditionVal = ''
            }
          }
      }
    }
    
</script>
<style scoped>
   .activity{
        width: 1200px;
		height: auto;
		padding-left: 30px;
		box-sizing: border-box;
		padding-top: 40px;
        background-color: #F2F6FA;
        margin: 30px;
		border: 1px solid #C9CDD1;
   }
   .activity .el-row {
		margin-bottom: 30px;
		font-size: 14px;
		color: #2D384C;
	}
    .activity .el-row .el-col{
        display: flex;
        align-items: center;
    }
    .activity .el-input,.activity .el-select{
        width:70%;
    }
    label{
        width: 100px;
        display: block;
    }
    .car-title {
		margin: 26px 0px 0px 30px;
		overflow: hidden;
		font-size: 16px;
        width: 1088px;
	}
	.center-button{
		padding-bottom: 30px;
    }
    .mavon_editor{
        height: 500px;
    }
    .condition-text{
        margin-left: 10px;
    }
    .coupon_bg{
        width: 200px;
        height: 140px;
        position: relative;
        font-size: 12px;
        text-align: center;
        line-height: 20px;
        color: #fff;
        margin-right: 20px;
    }
    .coupon_bg img{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .coupon_list{
        /* display: flex; */
    }
    .condition_text{
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0,-50%);
        width: 80%;
    }
    strong{
        font-size: 26px;
        font-weight: 300;
        margin-right: 4px;
    }
</style>

